@extends('layouts.userctl')
@section('content')
<style>
	.layui-card-header {
		margin-top: 15px;
	}


	.userstatus {
		margin-left: 6px;
		color: #888;
		font-size: 14px;
	}

	.layui-table-tips-c::before {
		position: absolute !important;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0px !important;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.laytable-cell-1-0-0 {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.tablett{
		width: 100%;
		height:50px;
		display:flex;
		justify-content:center;
		align-items:center;
		font-size:15px;
		margin:10px 0 8px;
		font-weight:bold;
	}
</style>
{{csrf_field()}}
<div class="layuimini-container">
	<div class="layuimini-main">
		<div style="margin: 10px 10px 10px 10px" id="btn">
			<form class="layui-form layui-form-pane" action="">
				<div class="layui-form-item">
					<div class="layui-inline" style="float: right;">
						<!--注意此处button标签里的type属性-->
						<button type="button" class="layui-btn layui-btn-normal" lay-submit id="searchbtn"
							lay-filter="data-search-btn"><i class="layui-icon layui-icon-search"></i>搜 索</button>
					</div>
					<div class="layui-inline" style="float: right;">
						<label class="layui-form-label">关键字</label>
						<div class="layui-input-inline">
							<!--注意此处input标签里的id-->
							<input class="layui-input" name="keyword" id="keywordinput">
						</div>
					</div>
					<div class="layui-inline" style="float: left;">
						<a class="layui-btn layui-btn-normal" href="{{route('admin.user.addrole')}}"
							style="color: #fff;"><i class="layui-icon layui-icon-addition"></i>添加角色</a>
						<!-- <a class="layui-btn layui-btn-normal" href="{{route('admin.user.addcomuser')}}"
							style="color: #fff;"><i class="layui-icon layui-icon-addition"></i>新增企业用户</a>
						<a class="layui-btn layui-btn-normal" href="{{route('admin.user.adduser')}}"
							style="color: #fff;"><i class="layui-icon layui-icon-addition"></i>新增政府用户</a> -->
					</div>
				</div>
			</form>
		</div>
		<!--注意此处table标签里的id-->
		<p class="tablett">社区管理员角色列表</p>
		<table class="layui-table layui-hide" id="dataTable" lay-filter="dataTable"></table>
		<p class="tablett" style="margin-top:20px;">社区工作人员职责列表</p>
		<table class="layui-table layui-hide" id="dataTable2" lay-filter="dataTable2"></table>
	</div>
</div>


<script>
	layui.use(['layer', 'table', 'form'], function() {
		var layer = layui.layer
		var form = layui.form
		var table = layui.table
		//用户表格初始化
		var dataTable = table.render({
			elem: '#dataTable',
			height: 'full',
			limit: 10,
			limits: [10, 20],
			url: '{{ route("admin.user.rolelistdata") }}',
			page: true,
			cols: [
				[ //表头
					{
						title: '序 号',
						templet: function(d) {
							return d.LAY_INDEX
						},
					},
					{ field: 'role_name', title: '角 色' },
					{ field: 'note', title: '备 注' },
					{
						title: '操 作',
						width: 290,
						templet: function(d) {
							return '<a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="ctlmenu">权 限</a><a class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">修 改</a><a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删 除</a>'
						}
					}
				]
			],
		})
		var dataTable2 = table.render({
			elem: '#dataTable2',
			height: 'full',
			url: '{{ route("admin.user.rolelistdata2") }}',
			cols: [
				[ //表头
					{
						title: '序 号',
						templet: function(d) {
							return d.LAY_INDEX
						},
					},
					{ field: 'name', title: '职 责' },
					{ field: 'note', title: '备 注' },
				]
			],
		})
		//监听工具条
		table.on('tool(dataTable)', function(obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
			var data = obj.data,
				layEvent = obj.event //获得 lay-event 对应的值
			if (layEvent === 'ctlmenu') {
				location.href = '/admin/user/rolemenu?id=' + data.id
			}else if (layEvent === 'edit') {
				location.href = '/admin/user/roleedit?id=' + data.id
			}else if (layEvent === 'del') {
				layer.confirm('确认删除该角色吗', { btn: ['确 认', '取 消'] }, function(index, layero) {
					var id = data.id
					$.ajax({
						type: 'POST',
						headers: { 'X-CSRF-TOKEN': $('input[name="_token"]').val() },
						url: '/admin/user/delrole',
						data: { id },
						success: function(res) {
							if (res.code == '1') {
								layer.msg(res.msg, { icon: 6 })
								setTimeout(function(){
									location.href = '/admin/user/rolelist'
								},1500)
							}else{
								layer.msg(res.msg, { icon: 5 })
							}
						}
					})
				}, function(index) {

				})
			}
		})
	})
</script>
@endsection
